<template>
	<view class="smsLogin">
		<view class="h1">验证登录</view>
		<view class="form-item">
			<view style="flex-basis: 90rpx;">+86 </view><input type="text"  placeholder="手机号" v-model.trim="codeInfo.account"/></view>
		<view class="form-item"><input type="text" placeholder="验证码" v-model.trim="loginInfo.code"/> 
		<view 
		:class="{'link':codeInfo.account}"
		size="mini" @click="sendVadCode" class="gray">发送验证码</view></view>
		<view>
			<button 
			:disabled="!codeInfo.account||!loginInfo.code"
			type="primary" 
			@click="login">登录</button>
		</view>
		<view class="p">
			<navigator url="">密码登录</navigator>
		</view>
		
	</view>
</template>

<script setup>
	import {sendCode,smsLogin} from '../../api/auth.js'
	import {ref} from 'vue';
	// 获取验证码需要的参数
	const codeInfo = ref({
		"mobileArea":"+86",
		"account":"",
		"type":2
	})
	// 登录需要的参数
	const loginInfo = ref({
	"mobileArea":"+86",
	"mobile":"",
	"code":"",
	"sourceCode":601,
	"callback":"https://m.xgimi.com/pages/user/user"
	})
	function sendVadCode(){
		sendCode(codeInfo.value)
		.then(res=>{
			if(res.code===200){
				loginInfo.value.mobile = codeInfo.value.account;	
				uni.showToast({
					title:"发送验证码成功"
				})
			}
		})
	}
 
	function login(){
		loginInfo.value.mobile = codeInfo.value.account	
		smsLogin(loginInfo.value)
		.then(res=>{
			console.log(res,"登录的结果")
			if(res.code===200){
				uni.setStorageSync("passToken",res.data.passToken);
				uni.switchTab({
					url:"/pages/user/user"
				})
			}
		})
	}
	
</script>

<style scoped lang="scss">
	.smsLogin{
		padding: 30rpx;
	}
	.form-item{
		margin-bottom: 30rpx;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		border-bottom: 1rpx solid #f0f0f0;
		justify-content: space-between;
		input{
			flex:1;
			line-height: 90rpx;
			height: 90rpx;
		}
	}
	 
	
</style>
